
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv='content-type' charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var map;
		var food;
		var snake;
		var initSpeed = 200;
		var timer;
		var grade = 0;

		function Map() {
			this.height = 600;
			this.width = 1200;
			this.color = '#EEEEEE';
			this._map = null;
			this.position = 'absolute';
			this.show = function() {
				this._map = document.createElement('div');
				this._map.style.width = this.width + 'px';
				this._map.style.height = this.height + 'px';
				this._map.style.position = this.position;
				this._map.style.backgroundColor = this.color;
				document.getElementsByTagName('body')[0].appendChild(this._map);
			}
		}

		function Food() {
			this.width = 20;
			this.height = 20;

			this.position = 'absolute';
			this.color = '#00FF00';
			this.x = 0;
			this.y = 0;

			this._food;
			//生成食物
			this.show = function() {
				this._food = document.createElement('div');
				this._food.style.width = this.width + 'px';
				this._food.style.height = this.height + 'px';
				this._food.style.position = this.position;
				this._food.style.backgroundColor = this.color;
				this.x = Math.floor(Math.random() * map.width / this.width);
				this.y = Math.floor(Math.random() * map.height / this.width);
				this._food.style.left = this.x * this.width + 'px';
				this._food.style.top = this.y * this.height + 'px';
				map._map.appendChild(this._food);

			}
		}

		function Snake() {
			this.width = 20;
			this.height = 20;
			this.position = 'absolute';
			this.direct = null; //移动方向
			//初始蛇身
			this.body = new Array(
				[3, 2, 'red', null], //蛇头
				[2, 2, 'blue', null], [1, 2, 'blue', null]
			);
			//生成蛇身
			this.show = function() {
				for(var i = 0; i < this.body.length; i++) {
					if(this.body[i][3] == null) {
						this.body[i][3] = document.createElement('div');
						this.body[i][3].style.width = this.width + 'px';
						this.body[i][3].style.height = this.height + 'px';
						this.body[i][3].style.position = this.position;
						this.body[i][3].style.backgroundColor = this.body[i][2];
						map._map.appendChild(this.body[i][3]);
					}
					this.body[i][3].style.left = this.body[i][0] * this.width + 'px';
					this.body[i][3].style.top = this.body[i][1] * this.height + 'px';
				}
			}
			//控制蛇移动
			this.move = function() {

				var length = this.body.length - 1;
				for(var i = length; i > 0; i--) {
					this.body[i][0] = this.body[i - 1][0];
					this.body[i][1] = this.body[i - 1][1];
				}

				switch(this.direct) {
					case 'right':
						this.body[0][0] = this.body[0][0] + 1;
						break;
					case 'left':
						this.body[0][0] = this.body[0][0] - 1;
						break;
					case 'up':
						this.body[0][1] = this.body[0][1] - 1;
						break;
					case 'down':
						this.body[0][1] = this.body[0][1] + 1;
						break;
				}

				this.condition();
				this.show();
			}
			//定时器，开始游戏时，调用
			this.speed = function() {
					timer = setInterval('snake.move()',initSpeed);
				}
			//条件处理
			this.condition = function() {
				//吃食物
				if(this.body[0][0] == food.x && this.body[0][1] == food.y) {
					grade++;
					this.body[[this.body.length]] = [0, 0, 'blue', null];
					map._map.removeChild(food._food)
					food.show();
				}
				//判断是否撞墙
				if(this.body[0][0] < 0 || this.body[0][0] >= map.width / this.width || this.body[0][1] < 0 || this.body[0][1] >= map.height / this.height) {
					alert('game over'+'贪吃蛇 积分' + grade);
					clearInterval(timer);
					return;
				}
				//判断是否撞到自身
				for(var i = 1; i < this.body.length; i++) {
					if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
						alert('game over'+'贪吃蛇 积分' + grade);
						clearInterval(timer);
						return;
					}
				}

			}
		}
		document.onkeydown = function(event) {
				//按下任意键，开始游戏
				if(snake.direct === null) {
					snake.direct = 'right';
					snake.speed();
				}
				//控制方向，W S D A分别代表 上下右左
				switch(window.event ? window.event.keyCode : event.keyCode) { //浏览器兼容处理
					case 87:
						snake.direct = snake.body[0][0] == snake.body[1][0] ? snake.direct : 'up'; //避免反向移动，触发死亡bug
						break;
					case 83:
						snake.direct = snake.body[0][0] == snake.body[1][0] ? snake.direct : 'down';
						break;
					case 68:
						snake.direct = snake.body[0][1] != snake.body[1][1] ? 'right' : snake.direct ;
						//console.log(snake.body[0][1]+"---"+snake.body[0][1]);
						break;
					case 65:
						snake.direct = snake.body[0][1] == snake.body[1][1] ? snake.direct : 'left';
					    //console.log(snake.body[0][1]+"---"+snake.body[0][1]);
						break;
				}
			}
		window.onload = function() {
			map = new Map();
			map.show();
			food = new Food();
			food.show();
			snake = new Snake();
			snake.show();
		}
	</script>

<body>

	</body>

</html>